<template>
	<view class="body">
		<view class="top">
			<u-tabs :list="list4" lineWidth="30" lineColor="#f4f5f7" :activeStyle="{
			            color: '#303133',
			            fontWeight: 'bold',
			            transform: 'scale(1.05)'
			        }" :inactiveStyle="{
			            color: '#606266',
			            transform: 'scale(1)'
			        }" itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;" @change="changeTab">
			</u-tabs>
			<u-search placeholder="请输入饰品关键字"></u-search>
		</view>


		<view class="demo" v-for="(item,index) in formattedTimes" :key="index" @click="comes(index)">
			<view class="kongge">

			</view>
			<view class="times">
				<view class="times_left">
					<p>{{item.formattedTime}}</p>
				</view>
				<view class="time_right">
					<span v-if="item.is_send==1">等待支付</span>
					<span v-if="item.is_send==2">待发货</span>
					<span v-if="item.is_send==3">已发货</span>
				</view>
			</view>
			<view class="demo_top">
				<view class="demo_top_left">
					<view class="imgbox">
						<view class="img" :style="{ backgroundImage: 'url(' + item.jewerly.image + ')' }"></view>
						
					</view>
				</view>
				<view class="demo_top_right">
					<h3 style="width: 70vw;font-size: 4vw;margin-left: 3vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;"
						v-if="item.jewerly">{{item.jewerly.name}}</h3>
						<p style="color:#f0842a;font-size: 3vw;margin-left: 3vw;" v-if="item.order_no">
							商品订单号：{{item.order_no}}</p>
							<p style="color:royalblue;font-size: 3vw;margin-left: 3vw;" v-if="item.order_num">
								支付宝订单号：{{item.order_num}}</p>
								<p style="width: 50vw;color:black;font-size: 3vw;margin-left: 3vw;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" v-if="item.user_steam_link">
									收货链接：{{item.user_steam_link}}</p>
									<p style="color:cadetblue;font-size: 3vw;margin-left: 3vw;" v-if="item.number">
										数量：{{item.number}}</p>
					<p style="color:#f0842a;font-size: 4vw;margin-left: 3vw;" v-if="item.jewerly">
					价格：￥{{item.jewerly.price}}</p>
				</view>
			</view>
			<!-- 	<view class="wear">
				<view class="wearNum">磨损：{{item.wear}}</view>
				<wearProgressVue :wear="item.wear" :zIndex="'999'"></wearProgressVue>
			</view> -->
		</view>
	</view>
</template>

<script>
	import wearProgressVue from "../../components/wear-progress.vue";
	export default {
		data() {
			return {
				list4: [{
					name: '全部'
				}, {
					name: '等待支付',

				}, {
					name: '待发货',
				}, {
					name: '已发货'
				}, ],
				dataList: [],
				times: [],
				indexs:0,
			}
		},
		computed: {
			formattedTimes() {
				return this.dataList.map((item, index) => {
					const date = new Date(item.create_time * 1000)
					const year = date.getFullYear();
					const month = (date.getMonth() + 1).toString().padStart(2, '0');
					const day = date.getDate().toString().padStart(2, '0');
					const hours = date.getHours().toString().padStart(2, '0');
					const minutes = date.getMinutes().toString().padStart(2, '0');
					const formattedTime = `${year}年${month}月${day}日 ${hours}:${minutes}`;
					return {
						...item,
						formattedTime
					};
				})
			}
		},
		onShow() {
			this.getordersList(0)

			console.log(this.dataList)

		},
		components: {
			wearProgressVue
		},
		methods: {
			comes(index){
				console.log(this.dataList[index].jewerly.id,"111")
				let data=JSON.stringify(this.dataList[index].id)
				
				uni.navigateTo({
					url:`/pages/orders/orders_xq/orders_xq?data=${data}`
				})
				
				// uni.request({
				// 	url:"/api/jewerly/order_info",
				// 	method:"POST",
				// 	data:data,
				// 	header:{
				// 		'content-Type': 'application/json',
				// 		token: uni.getStorageSync('token')
				// 	},
					
				// }).then(res=>{
				// 	console.log(res)
					
				// })
			},
			changeTab(index) {
				console.log(index.index,"index");
				this.getordersList(index.index)
			},

			getordersList(status) {
				let data = {
					page: 1,
					limit: 10,
					status: status
				}
				console.log(data);
				uni.request({
					url: "/api/jewerly/order_list",
					method: "GET",
					data: data,
					header: {
						"content-type": " application/json; charset=utf-8",
						//设置用户访问的token信息
						"token": uni.getStorageSync("token")
					},

				}).then(res => {
					console.log(res);
					if (res.data.code == 409 || res.data.code == 403 || res.data.code == 303) {
						uni.removeStorageSync("user")
						uni.removeStorageSync("token")
						uni.removeStorageSync("datausers")
						uni.showToast({
							icon: "none",
							title: "请重新登录",
							duration: 1000
						})
						setTimeout(() => {
							uni.navigateTo({
								url: "/pages/login/login"
							})
						}, 1000)
						return
					}
					this.dataList = res.data.data.data

				})

			}
		}
	}
</script>

<style>
	.body {
		width: 100vw;
		height: 90vh;
		background-color: #f4f5f7;
		display: flex;
		flex-direction: column;
		align-items: center;
		overflow: scroll;
	}

	.top {
		width: 100%;
		height: 24vw;
		background-color: #ffffff;
	}

	.kongge {
		width: 100%;
		height: 5vw;
		background-color: #f7f7f7;
	}

	.times {
		width: 100%;
		height: 10vw;
		background-color: #ffffff;
		display: flex;
		font-size: 3vw;
		line-height: 10vw;
		color: #acadaf;
		border-bottom: 1px solid #ccc;
	}

	.times_left {
		width: 85%;
		height: 100%;
		/* margin-left: 10vw; */

	}

	.times_right {
		width: 15%;
		height: 100%;
	}

	.demo {
		width: 100%;
		height: 45vw;
		background-color: #ffffff;
		/* overflow: hidden; */
		display: flex;
		flex-wrap: wrap;
	}

	.demo_top {
		width: 100%;
		height: 35vw;
		display: flex;
	}

	.demo_top_left {
		width: 30%;
		height: 25vw;

	}

	.imgbox {

		width: 100%;
		height: 100%;
		background-image: linear-gradient(to top, #999999, #ccc);
		position: relative;

		.img {
			width: 100%;
			height: 25vw;
			background-size: contain;
			background-position: center;
			margin-top: 1vw;
			background-repeat: no-repeat;
		}

		.wear {
			position: absolute;
			width: 15vw;
			height: 5vw;
			top: 0;
			left: 0;
			display: flex;
			justify-content: right;

			.text {
				width: 13vw;
				height: 5vw;
				background-color: black;
				font-size: 3vw;
				display: flex;
				justify-content: center;
				align-items: center;
				font-weight: bold;
			}
		}

	}

	.wear {
		width: 100%;
		height: 10vw;
		display: flex;
		flex-direction: column;
		justify-content: space-around;

		.wearNum {
			width: 100%;
			height: 50%;
			white-space: nowrap;
			font-size: 3.5vw;
		}
	}
</style>